<template>
    <div class="news-info" >
        <dir class="news-info-content">
            <h4 class="news-Title mui-ellipsis">{{news.title}}</h4>
            <div class="news-props ">
                <span>发表时间:{{news.time}}</span>
                <span>点击次数：{{news.type}}</span>
            </div>
            <div class="news-content">
                <div class="news-img " >
                    <img :src="item.src" data-preview-src="" data-preview-group="1" v-for="item in list" :key="item.id">
                    
                </div>
                <div>{{news.brief}}</div>
            </div>
        <div>
        
        <comment :belongid="this.$route.params.item.id"></comment>
            </div>
        </dir>
    </div>
</template>  

<script>
import mui from '../../../../lib/MUI/js/mui.min.js';
import mui1 from '../../../../lib/MUI/js/mui.zoom.js';
import mui2 from '../../../../lib/MUI/js/mui.previewimage.js';
import mui3 from '../../../../lib/MUI/css/mui.min.css'
import comment from '../../subcomponents/Comment.vue'
export default {
    data(){
        return{
        list:[],
        news:{},
        belongid:""
        }
    },
    mounted(){
        mui.previewImage();
        this.$http.post('http://192.168.0.197:88/getImgs',{belongId:this.$route.params.item.id},{emulateJSON:true}).then(function(res){
            // console.log(res.body); 
                    this.list= res.body.data;  
        },function(res){
                // console.log(res.status);
        });
        this.news = this.$route.params.item;
    },
    components:{
        comment
    }
}
</script>

<style scoped>
    .news-Title{
        text-align: center;
        font-size: 15px;
        color: red;
        max-width: 65%;
        margin: 0 auto;
    }
    .news-props{
       
        font-size: 9px;
        display: flex;
        justify-content: space-between;
        padding:5px 0;
        border-bottom: 1px #aaaa solid;
    }
    .news-info{
        padding: 10px;
    }
    .news-content{
        margin-top: 10px;
        font-size: 12px;
        color: #888;
        
    }
    h4{
        font-size: 16px;
    }
    textarea{
        font-size: 12px;
    }
    .comment-list{
        font-size: 12px;
    }
    .comment-props{
        display: flex;
        justify-content: space-between;
        background-color: #8888
    }
    .comment-list:not(:first-child){
        margin-top: 10px;
    }
    .news-img{
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: space-between
    }
    .news-img img{
        width: 25%;
    }
    .news-info-content{
        padding-left: 0
    }
</style>